<template>
	<view :class="currentTheme">
		<a-nabbar  name="组局订单"/>
		<view class="content">
			<!-- <view class="u-padding-32">
				<item-search placeholder="请输入关键词" @change="setDown" v-model="name"></item-search>
			</view> -->
			<view class="sticky-tabs  u-padding-left-32 u-padding-right-32 u-flex u-row-center" :style="{top:top}">
				<me-tabs v-model="indexCurrent" @tabTop="getTabTop" :height="88" :tabWidth="160" :tabs="tabs" @change="tabGetChange" activeColor="#765CFE"></me-tabs>
			</view>
			<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
				<swiper-item  v-for="(a,b) in tabs" :key="b" >
					<mescroll-item :tabIndex="b" :tab="a" :inputName="name"  ref="mescroll"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperList from '@/mixins/swiperList.js'
	import MescrollItem from "./swiperItem.vue";
	import pageMixins from '@/pages/pageMixins.js'
	import carManager from '@/mixins/carManager.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	export default {
		mixins:[swiperList,pageMixins,carManager],
		data() {
			return {
				itemStyle:{
					color:'#B0B2D8'
				},
				tabs:[
					{name:'全部', list: null, num:0, y:0,curPageLen:0, type:null, hasNext:true,showEnrollTime:2,userType:this.isAuth},
					{name:'组局中', list: null, num:0, y:0,curPageLen:0, type:0, hasNext:true,showEnrollTime:2,userType:this.isAuth},
					{name:'游戏中', list: null, num:0, y:0,curPageLen:0, type:1, hasNext:true,userType:this.isAuth},
					{name:'已完成', list: null, num:0, y:0, curPageLen:0,type:2, hasNext:true,showEnrollTime:1,userType:this.isAuth}
				],
				timer:null,
				// otherHeight:'128rpx',
				name:'',
			}
		},
		components: {
			MescrollItem,itemSearch
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo(){
				if(this.token) this.$store.dispatch("getInfo"); //更新用户信息
			},
			appointment() {
				this.$u.route({
					url:'/pagesA/goonLarpManager/appointment'
				})
			},
			setDown(){
				const ref = this.$refs.mescroll[this.tabIndex];
				ref.form.name = this.name;
				ref.downCallback()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.tag-box{
		flex-wrap: wrap;
		.tag-item{
			width:33.33%;
			.tag-title{
				display: block;
				margin:10rpx;
				text-align: center;
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 0 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 50rpx;
				border-radius: 10rpx;
				color: var(--theme-color);
				border: 1px solid var(--theme-color);
				&.checked-tag-title{
					background-color: var(--theme-color);
					color: white;
				}
			}
		}
	}
	.tag-btn-view{
		height: 120rpx;
	}
	.tag-btns{
		justify-content: flex-end;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 32rpx;
		background-color: var(--submit-bar-background-color);
		.tag-btn{
			width: 140rpx;
			line-height: 60rpx;
			color: white;
			text-align: center;
			font-size: 22rpx;
			&.right-btn{
				background: #5643B9;
				border-color: #5643B9;
				border-radius: 0 var(--goods-action-button-border-radius,20px) var(--goods-action-button-border-radius,20px) 0;
			}
			&.left-btn{    
				background: #765CFE;
				border-color: #765CFE;
				border-radius: var(--goods-action-button-border-radius,20px) 0 0 var(--goods-action-button-border-radius,20px);
			}
		}
	}
	.sticky-tabs{
		z-index: 990;
		position: sticky;
	}
	.btn-style{
		width: 200rpx;
		line-height: 70rpx;
		text-align: center;
		margin: 0 auto;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: #765CFE;
		color: white;
	}
</style>